<script setup lang="ts">
import { ref } from "vue";
import user from "../../../Lesson 02/code/src/api/user";
import Child from "../src/components/Child.vue";

const age2 = ref(10);

const users = ref([
  {
    name: "user1",
    age: 18,
  },
  {
    name: "user2",
    age: 20,
  },
]);

const userUpdateHandler = (data) => {
  console.log("接收到子组件的数据是：", data);

  users.value.push(data);
};

const childEmail = ref("");
const childComponent = ref();

setTimeout(() => {
  console.log("App.vue 调用子组件的 getEmail 方法，来获取其内部的状态值");
  childEmail.value = childComponent.value.getEmail();
}, 2000);


// 跨组件通信实例
import { provide } from 'vue'
const message = "hello root"
const printMessage = (msg : string)=>{
  console.log("被调用的provide函数：", msg)
}
provide( 'message345',  message)
provide( 'printMessage',  printMessage)
</script>

<template>
  <div>
    <Child
      :age="age2"
      :users="users"
      @userUpdated="userUpdateHandler"
      ref="childComponent"
    />
    <div>Child中内部状态中：email: {{ childEmail }}</div>
  </div>
</template>

<style scoped>
</style>
